<!-- 用能分析，包括水电 -->
<template>
    <div class="rightContentNew" :style="{left: dir == 'left' ? '260px' : '0px'}">
        <div class="back" @click="back"><img src="../../assets/images/monitor/back.png" /> <label>返回</label></div>
        <div class="main">
            <div class="analysis">
                <div class="aEcharts">
                    <navigation-bar customTitle="用能分析"> </navigation-bar>
                    <!-- <div class="mb10">用电量分析</div> -->
                    <div class="ynfx-content">
                        <div class="ynfx-content1">
                            <div class="mb10">
                                <DatePicker
                                    v-if="currentEcharts != 'hour'"
                                    :type="getDateType()"
                                    placeholder="请选择"
                                    :value="dateValue"
                                    @on-change="changeDate"
                                    style="width: 150px; margin-right: 10px"
                                ></DatePicker>

                                <DatePicker
                                    v-if="currentEcharts == 'hour'"
                                    :value="currentHour"
                                    format="yyyy-MM-dd"
                                    type="daterange"
                                    placement="bottom-end"
                                    placeholder="Select date"
                                    style="width: 210px; margin-right: 10px"
                                    disabled
                                ></DatePicker>

                                <el-button-group>
                                    <el-button
                                        :type="currentEcharts == 'hour' ? 'primary' : 'default'"
                                        size="mini"
                                        @click="echartBtnClick('hour')"
                                        >72小时</el-button
                                    >
                                    <el-button
                                        :type="currentEcharts == 'today' ? 'primary' : 'default'"
                                        size="mini"
                                        @click="echartBtnClick('today')"
                                        >当日</el-button
                                    >
                                    <el-button
                                        :type="currentEcharts == 'month' ? 'primary' : 'default'"
                                        size="mini"
                                        @click="echartBtnClick('month')"
                                        >当月</el-button
                                    >
                                    <el-button
                                        :type="currentEcharts == 'year' ? 'primary' : 'default'"
                                        size="mini"
                                        @click="echartBtnClick('year')"
                                        >当年</el-button
                                    >
                                </el-button-group>
                            </div>
                            <div class="bgF5" style="height: 240px; overflow: hidden; width: 100%">
                                <HourEcharts :dir="dir" v-if="currentEcharts == 'hour'" :deviceInfo="changeDeviceInfo"></HourEcharts>
                                <MonthEcharts
                                    :dir="dir"
                                    v-if="currentEcharts == 'month'"
                                    :deviceInfo="changeDeviceInfo"
                                    :dateValue="dateValue"
                                ></MonthEcharts>
                                <TodayEcharts
                                    :dir="dir"
                                    v-if="currentEcharts == 'today'"
                                    :deviceInfo="changeDeviceInfo"
                                    :dateValue="dateValue"
                                ></TodayEcharts>
                                <YearEcharts
                                    :dir="dir"
                                    v-if="currentEcharts == 'year'"
                                    :deviceInfo="changeDeviceInfo"
                                    :dateValue="dateValue"
                                ></YearEcharts>
                            </div>
                        </div>
                        <elecAnalysis v-if="changeDeviceInfo.eq_type == '01'" :deviceInfo="changeDeviceInfo"></elecAnalysis>
                        <waterAnalysis v-if="changeDeviceInfo.eq_type == '02'" :deviceInfo="changeDeviceInfo"></waterAnalysis>
                    </div>
                </div>
            </div>
            <div class="userInfo">
                <navigation-bar customTitle="账户信息"> </navigation-bar>

                <div class="userContent">
                    <div class="userContentMain">
                        <div class="userContentLeft">
                            <div class="userItem">
                                <label>账户名称：</label>
                                <span>{{ userInfo.ac_name ?? '--' }}</span>
                            </div>
                            <div class="userItem">
                                <label>用户名称：</label>
                                <span>{{ userInfo.user_name ? userInfo.user_name : '--' }}</span>
                            </div>
                            <div class="userItem">
                                <label>联系电话：</label>
                                <span>{{ userInfo.user_tel ? userInfo.user_tel : '--' }}</span>
                            </div>
                        </div>
                        <div class="userContentRight">
                            <div class="userItem">
                                <label>告警金额：</label>
                                <span>{{ userInfo.alarm_sum ? saveTwo(userInfo.alarm_sum) : '--' }}</span>
                            </div>
                            <div class="userItem">
                                <label>透支额度：</label>
                                <span>{{ userInfo.over_sum ? saveTwo(userInfo.over_sum) : '--' }}</span>
                            </div>
                            <div class="userItem">
                                <label>物业欠费：</label>
                                <span>{{ userInfo.w_isPay == '0' ? '是' : '否' }}</span>
                            </div>
                        </div>
                    </div>
                    <div class="userContentMain">
                        <div class="userContentLeft">
                            <div class="userItem">
                                <label>账户余额：</label>
                                <span>{{ userInfo.ac_sum ? saveTwo(userInfo.ac_sum) : '--' }}</span>
                            </div>
                            <div class="userItem">
                                <label>自费余额：</label>
                                <span>{{ userInfo.self_sum ? saveTwo(userInfo.self_sum) : '--' }}</span>
                            </div>

                            <div class="userItem">
                                <label>定额余额：</label>
                                <span>{{ userInfo.free_sum ? saveTwo(userInfo.free_sum) : '--' }}</span>
                            </div>
                        </div>
                        <div class="userContentRight">
                            <div class="userItem">
                                <label>电能定额：</label>
                                <span>{{ userInfo.free_e_sum ? saveTwo(userInfo.free_e_sum) : '--' }}</span>
                            </div>
                            <div class="userItem">
                                <label>水能定额：</label>
                                <span>{{ userInfo.free_w_sum ? saveTwo(userInfo.free_w_sum) : '--' }}</span>
                            </div>
                            <!--                   
                    <div class="userItem">
                        <label>账户类型：</label>
                        <span>{{ userInfo.acTypeName ? userInfo.acTypeName : '--' }}</span>
                    </div>
                    <div class="userItem">
                        <label>账户使用类型：</label>
                        <span>{{ userInfo.accountTypeName ? userInfo.accountTypeName : '--' }}</span>
                    </div>
                    <div class="userItem">
                        <label>单价：</label>
                       这里展示为：电（0.618元/度），水（3.88元/吨）
                        <span>{{ userInfo.price ? userInfo.price : '--' }}</span>
                    </div> -->
                            <div class="userItem">
                                <label>物业费用：</label>
                                <span>{{ userInfo.wyf ? userInfo.wyf : '--' }}</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="deviceInfo">
                <navigation-bar customTitle="设备信息"> </navigation-bar>
                <div style="margin: 0 10px">
                    <el-table
                        :data="tableData"
                        highlight-current-row
                        style="width: 100%"
                        size="small"
                        border
                        @row-click="handleClickTableRow"
                    >
                        <el-table-column prop="EQ_NAME" label="设备名称" width="200"> </el-table-column>
                        <el-table-column prop="EQ_ADDRESS" label="设备地址" width="180"> </el-table-column>
                        <el-table-column prop="type" label="设备类型"> </el-table-column>
                        <el-table-column prop="BD_NAME" label="所属建筑名称" width="180"> </el-table-column>
                        <el-table-column prop="SWITCH_STATE" label="是否合闸">
                            <template slot-scope="scope">
                                {{ scope.row.SWITCH_STATE == 0 ? '合闸' : '分闸' }}
                            </template>
                        </el-table-column>
                        <el-table-column prop="RATE" label="倍率"> </el-table-column>
                        <el-table-column prop="CURRENT_VALUE" label="当前采集读数"> </el-table-column>
                        <el-table-column prop="PRICE" label="单价"> </el-table-column>
                        <el-table-column prop="GATEWAY_NAME" label="网关名称" width="200"> </el-table-column>
                        <el-table-column prop="GATEWAY_ID" label="网关编号" width="130"> </el-table-column>
                    </el-table>
                </div>
            </div>
            <div class="inInfo">
                <navigation-bar customTitle="缴退费入口"> </navigation-bar>
                <div class="inInfoMain">
                    <div class="left">
                        <div class="p33" style="width: 100%">
                            <label class="p33Label">缴费金额：</label>
                            <el-button :type="moneyValue == '10' ? 'primary' : 'default'" @click="changeMoney(10)">10元</el-button>
                            <el-button :type="moneyValue == '20' ? 'primary' : 'default'" @click="changeMoney(20)">20元</el-button>
                            <el-button :type="moneyValue == '50' ? 'primary' : 'default'" @click="changeMoney(50)">50元</el-button>
                            <el-button :type="moneyValue == '100' ? 'primary' : 'default'" @click="changeMoney(100)">100元</el-button>
                        </div>

                        <div class="p33">
                            <label class="p33Label">缴费金额：</label>
                            <el-input
                                size="medium"
                                placeholder="请输入"
                                type="number"
                                class="inputOrSelect"
                                v-model="jfje"
                                min="1"
                                max="1000"
                                @change="jfjeChange"
                            >
                                <label slot="suffix">元</label>
                            </el-input>
                        </div>
                        <!-- <div class="p33">
                            <label class="p33Label">缴费方式：</label>
                            <el-select v-model="valueCommon" placeholder="请选择" class="inputOrSelect" size="medium">
                                <el-option v-for="item in optionsCommon" :key="item.value" :label="item.label" :value="item.value">
                                </el-option>
                            </el-select>
                        </div> -->
                        <div class="p33">
                            <label class="p33Label">退费金额：</label>
                            <el-input
                                size="medium"
                                min="1"
                                max="1000"
                                placeholder="请输入"
                                type="number"
                                class="inputOrSelect"
                                v-model="tfje"
                            >
                                <label slot="suffix">元</label>
                            </el-input>
                        </div>
                        <!-- <div class="p33">
                            <label class="p33Label">退费方式：</label>
                            <el-select v-model="valueCommon" placeholder="请选择" class="inputOrSelect" size="medium">
                                <el-option v-for="item in optionsCommon" :key="item.value" :label="item.label" :value="item.value">
                                </el-option>
                            </el-select>
                        </div> -->
                        <!-- <div class="p33">
                            <label class="p33Label">联系方式：</label>
                            <span>{{ userInfo.user_tel ? userInfo.user_tel : '--' }}</span>
                        </div> -->
                        <!-- <div class="p33">
                            <label class="p33Label">费用类型：</label>
                            <el-select v-model="valueCommon" placeholder="请选择" class="inputOrSelect" size="medium">
                                <el-option v-for="item in optionsCommon" :key="item.value" :label="item.label" :value="item.value">
                                </el-option>
                            </el-select>
                        </div> -->
                        <div class="p33">
                            <label class="p33Label">操作员：</label>
                            <span>{{ oprUserName }}</span>
                            <!-- <el-input size="medium" placeholder="请输入" type="text" class="inputOrSelect"> </el-input> -->
                        </div>
                        <div class="p66" style="width: 66%; clear: both; height: 60px">
                            <label class="p33Label p33Bz">备注：</label>
                            <el-input
                                size="medium"
                                placeholder="请输入"
                                type="textarea"
                                class="inputOrSelect"
                                v-model="bz"
                                style="width: 323px"
                            >
                            </el-input>
                        </div>
                        <div class="p33" style="margin-top: 16px">
                            <el-button
                                size="small"
                                style="padding: 10px 5px"
                                type="primary"
                                @click="jfClick"
                                :disabled="deviceInfo.is_open != '1'"
                                >立即缴费</el-button
                            >
                            <el-button
                                size="small"
                                style="padding: 10px 5px"
                                type="primary"
                                @click="tfClick"
                                :disabled="deviceInfo.is_open != '1'"
                                >立即退费</el-button
                            >
                            <el-button
                                size="small"
                                style="padding: 10px 5px"
                                type="primary"
                                @click="wyjfClick"
                                v-if="userInfo.w_isPay == '0'"
                                >物业缴费</el-button
                            >
                        </div>
                    </div>
                    <div class="right">
                        <el-table :data="payRecordsList" style="width: 100%" size="small" border height="169">
                            <!-- //  缴费表GUID acId
                    //  账户ac_guid
                    //  acName账户名称
                    //  sum缴费金额
                    //  paytime缴费时间
                    //   ac_sum充值前账户余额
                    //    userName 缴费人姓名
                    //    operType充值操作类型（0：人工充值 1：系统自动充值 2：账户清3：结算充值）
                    //     classify 操作类型（pay缴费 refund退费） -->
                            <el-table-column prop="paytime" label="缴退费时间" width="140"> </el-table-column>
                            <el-table-column prop="classify" label="操作类型" width="100">
                                <template slot-scope="scope">
                                    <label v-if="scope.row.classify == 'pay'">缴费</label>
                                    <label v-if="scope.row.classify == 'refund'">退费</label>
                                </template>
                            </el-table-column>

                            <el-table-column prop="sum" label="缴退费金额" width="100">
                                <template slot-scope="scope">
                                    {{ scope.row.sum ? parseFloat(scope.row.sum).toFixed(2) : '--' }}
                                </template>
                            </el-table-column>
                            <el-table-column prop="ac_sum" label="原账户余额" width="120">
                                <template slot-scope="scope">
                                    {{ scope.row.ac_sum ? parseFloat(scope.row.ac_sum).toFixed(2) : '--' }}
                                </template>
                            </el-table-column>
                            <el-table-column prop="operType" label="充值类型" width="120">
                                <template slot-scope="scope">
                                    <label v-if="scope.row.operType == '0'">人工充值</label>
                                    <label v-if="scope.row.operType == '1'">系统自动充值</label>
                                    <label v-if="scope.row.operType == '2'">账户清空</label>
                                    <label v-if="scope.row.operType == '3'">结算充值</label>
                                </template>
                            </el-table-column>
                            <el-table-column prop="id" label="操作" fixed="right">
                                <template slot-scope="scope">
                                    <a href="javascript:void(0)" @click="getPj(scope.row)">补打票据</a>
                                </template>
                            </el-table-column>
                        </el-table>
                    </div>
                </div>
            </div>
        </div>
        <jfMoney v-if="showJfMoeny" :jfje="jfje" :userInfo="userInfo" :oprUserName="oprUserName" @close="closeJf"></jfMoney>

        <tfMoney v-if="showTfMoeny" :jfje="tfje" :userInfo="userInfo" :oprUserName="oprUserName" @close="closeTf"></tfMoney>

        <wyMoney v-if="showWyMoney" :jfje="jfje" :userInfo="userInfo" :oprUserName="oprUserName" @close="closeWy"></wyMoney>

        <tDsReportPrint v-if="showPrint" :orderId="curItem.id" :time="curItem.paytime" @close="showPrint = false"></tDsReportPrint>
    </div>
</template>

<script>
import HourEcharts from './echarts/electricityMeterEcharts/hourEcharts'
import MonthEcharts from './echarts/electricityMeterEcharts/monthEcharts.vue'
import TodayEcharts from './echarts/electricityMeterEcharts/todayEcharts.vue'
import YearEcharts from './echarts/electricityMeterEcharts/yearEcharts.vue'
import {moniterBottomTable} from '@/mockData/monitorCenter.js'
import navigationBar from '@/components/customComponents/managementCenter/navigationBarCustomTitleMargin'
import elecAnalysis from './components/waterAndElec/elecAnalysis'
import waterAnalysis from './components/waterAndElec/waterAnalysis.vue'
import {AjaxCommon, getUser} from '@/libs/apiCommon'
import {PopupCommon} from '@/libs/popupCommon'
import {Utility} from '@/libs/utility'
import jfMoney from './components/jfMoney'
import wyMoney from './components/wyMoney'
import tfMoney from './components/tfMoney'
import moment from 'moment'
import tDsReportPrint from '@/view/managementCenter/dataReportCenter/components/tDsReportPrint'
export default {
    name: 'electricityMeter',
    props: ['dir', 'deviceInfo'],
    components: {
        HourEcharts,
        MonthEcharts,
        TodayEcharts,
        YearEcharts,
        navigationBar,
        waterAnalysis,
        elecAnalysis,
        jfMoney,
        tfMoney,
        wyMoney,
        tDsReportPrint
    },
    data() {
        return {
            curItem: {},
            showPrint: false,
            currentHour: [moment().add(-2, 'd').format('YYYY-MM-DD'), moment().format('YYYY-MM-DD')],
            showJfMoeny: false,
            showTfMoeny: false,
            showWyMoney: false,
            moneyValue: '',
            bottomTableData: moniterBottomTable,
            tableData: [],
            /** echarts的类型，hour,today,month,year*/
            currentEcharts: 'month',
            options: [
                {
                    value: '1',
                    label: '电能'
                },
                {
                    value: '2',
                    label: '水能'
                }
            ],
            value: '1',
            optionsCommon: [
                {
                    value: '1',
                    label: '参数1'
                },
                {
                    value: '2',
                    label: '参数2'
                }
            ],
            valueCommon: '1',
            userInfo: {
                /** 账户GUID */
                ac_guid: '',
                /** 用户ID */
                user_id: '',
                /** ac_id账户ID */
                ac_id: '',
                /** 账户名称 */
                ac_name: '',
                /** 用户名称 */
                user_name: '',
                /** 邮箱 */
                user_email: '',
                /** 电话 */
                user_tel: '',
                /** 免费账户余额 */
                free_sum: '',
                /** 免费电余额 */
                free_e_sum: '',
                /** 免费水余额 */
                free_w_sum: '',
                /** 透支额度 */
                over_sum: '',
                /** 告警金额 */
                alarm_sum: '',
                /** 计算时间大于一个指定周期提示操作人要注意 */
                com_cycle_time: '',
                /** 自缴费剩余金额 */
                self_sum: '',
                /** 账户类型（0：电表账户 1：水表账户 2:气表账户 3：电表水表混合 4：电表气表混合 5：水表气表混合 6：电表水表气表混合） */
                acType: '',
                acTypeName: '',
                /** 总剩余金额 */
                ac_sum: '',
                /** 账户使用类型（来至于数据字典，如学生宿舍、办公室、物业等 WYFZH为需缴纳物业费账户）  */
                w_acType: '',
                /** 单价（仅账户类型为0或1时有数据如电价、水价，混合账户无单价） */
                price: '',
                /** 是否物业欠费 默认为-1，当返回0时，点击充值时要提示未缴纳物业费 */
                w_isPay: '',
                /** 物业费金额 */
                wyf: ''
            },
            deviceList: [],
            dateValue: Utility.getCurrentTime(),
            accountTypeList: [],
            payRecordsList: [],
            oprUserName: '',
            /** 缴费金额 */
            jfje: '',
            /** 退费金额 */
            tfje: '',
            /** 备注 */
            bz: '',
            /** 点击进来的位置，1为从监控右侧点击进来，2为左侧建筑树的设备点击进来的 */
            inType: 1,
            changeDeviceInfo: {}
        }
    },
    computed: {},
    created() {
        this.changeDeviceInfo = this.deviceInfo
        this.initDeviceInfo()
    },
    watch: {
        deviceInfo: {
            handler(di) {
                if (di) {
                    this.changeDeviceInfo = di
                    this.initDeviceInfo()
                }
            },
            deep: true,
            immediate: false
        }
    },
    methods: {
        getPj(item) {
            this.curItem = item
            this.showPrint = true
        },
        // 物业缴费
        wyjfClick() {
            // if (this.jfje == 0 || this.jfje == '') {
            //     PopupCommon.notify('info', '请输入缴费金额')
            //     return
            // }
            this.showWyMoney = true
        },
        changeDate(e) {
            this.dateValue = e
        },
        handleClickTableRow(e) {
            let device = JSON.parse(JSON.stringify(this.changeDeviceInfo))
            // 从左侧的树设备点击进来的
            device.eq_guid = e.EQ_GUID
            // 字段命名是真的蛋疼
            device.eq_type = e.EQ_TYPE
            device.eq_name = e.EQ_NAME
            this.changeDeviceInfo = {...device}
        },
        async initDeviceInfo() {
            this.$emit('showSpin', true)
            const user = getUser()
            if (this.deviceInfo?.eq_guid) {
                this.inType = 1
            } else {
                this.inType = 2
                // 从左侧的树设备点击进来的
                this.deviceInfo.eq_guid = this.deviceInfo.id
                // 字段命名是真的蛋疼
                this.deviceInfo.eq_type = this.deviceInfo.etype
                this.deviceInfo.eq_name = this.deviceInfo.title
            }
            this.oprUserName = user.realname
            await this.initData()
            setTimeout(() => {
                this.$emit('showSpin', false)
            }, 500)
        },
        async closeJf() {
            this.showJfMoeny = false
            await this.getUserInfo()
            await this.getDeviceInfo()
            this.getPayRecord()
        },
        async closeTf() {
            this.showTfMoeny = false
            await this.getUserInfo()
            await this.getDeviceInfo()
            this.getPayRecord()
        },
        async closeWy() {
            this.showWyMoney = false
            await this.getUserInfo()
            await this.getDeviceInfo()
            this.getPayRecord()
        },
        saveTwo(value) {
            if (value) {
                return parseFloat(value).toFixed(2)
            } else {
                return '--'
            }
        },
        tfClick() {
            if (this.userInfo.w_isPay == '0') {
                PopupCommon.notify('info', '请先缴纳物业费')
                this.showWyMoney = true
                return
            }
            if (this.tfje == 0 || this.tfje == '') {
                PopupCommon.notify('info', '请输入退费金额')
                return
            }
            const self_sum = parseFloat(this.userInfo.self_sum ? this.userInfo.self_sum : 0)
            if (parseFloat(this.tfje) > self_sum) {
                PopupCommon.notify('info', '退费金额不能大于自缴费剩余金额：' + self_sum)
                return
            }
            this.showTfMoeny = true
        },
        jfClick() {
            if (this.userInfo.w_isPay == '0') {
                PopupCommon.notify('info', '请先缴纳物业费')
                this.showWyMoney = true
                return
            }
            console.log(this.jfje, 'this.jfje...')
            if (this.jfje == 0 || this.jfje == '') {
                PopupCommon.notify('info', '请输入缴费金额')
                return
            }
            this.showJfMoeny = true
        },
        jfjeChange(e) {
            const moneyList = [10, 20, 50, 100]
            if (moneyList.includes(parseInt(e))) {
                this.moneyValue = e
            } else {
                this.moneyValue = ''
            }
            this.jfje = e
        },
        changeMoney(value) {
            this.moneyValue = value
            this.jfje = value
            this.tfje = value
        },
        async initData() {
            // 获取字典，账户类型ACCOUNT_TYPE  value,desc
            const dict = await Utility.getDictListByTypeCode('ACCOUNT_TYPE')
            this.accountTypeList = dict
            await this.getUserInfo()
            await this.getDeviceInfo()
            await this.getPayRecord()
        },
        getDateType() {
            if (this.currentEcharts == 'today') {
                return 'date'
            }
            if (this.currentEcharts == 'month') {
                return 'month'
            }
            if (this.currentEcharts == 'year') {
                return 'year'
            }
        },
        getPayRecord() {
            // 账户存在才有记录
            if (this.userInfo.ac_guid) {
                // const acGuid = `074B94CCEF364EF1B41CF349F51151F5`
                const params = `/api/Payment/GetPayRecords/${this.userInfo.ac_guid}/1/100`
                AjaxCommon(params, 'get', null).then((res) => {
                    const ac_id = this.userInfo.ac_id
                    const payRecordsList = res.data?.Message?.rows ?? []
                    // 这个接口返回有问题
                    this.payRecordsList = payRecordsList.filter((t) => t.acId == ac_id)
                })
            }
        },
        async getDeviceInfo() {
            // if (this.deviceInfo.is_open == '1') {
            const eq_guid = this.deviceInfo.eq_guid
            const params = `/api/Payment/GetEqInfoById/${eq_guid}/${this.deviceInfo.is_open}`
            const res = await AjaxCommon(params, 'get', null)
            if (res) {
                const data = res?.data?.Message ?? []
                data?.map((t) => {
                    t.type = t.EQ_TYPE == '01' ? '电表' : t.EQ_TYPE == '02' ? '水表' : t.EQ_TYPE == '03' ? '气表' : '其它'
                    t.accountTypeName = this.accountTypeList.find((b) => b.value == t.w_acType)?.desc
                    return t
                })
                this.tableData = data
            } else {
                PopupCommon.notify('info', '找不到此设备信息')
            }
            // }
        },
        async getUserInfo() {
            this.userInfo = {}
            // if (this.deviceInfo.is_open == '1') {
            const res = await AjaxCommon(`/api/Payment/GetAccount/${this.deviceInfo.eq_guid}`, 'get', null)
            if (res) {
                let data = res.data.Message?.[0] ?? {}
                /** 账户类型（0：电表账户 1：水表账户 2:气表账户 3：电表水表混合 4：电表气表混合 5：水表气表混合 6：电表水表气表混合） */
                if (typeof data?.acType != 'undefined') {
                    switch (data?.acType) {
                        case 0:
                            data.acTypeName = '电表账户'
                            break
                        case 1:
                            data.acTypeName = '水表账户'
                            break
                        case 2:
                            data.acTypeName = '气表账户'
                            break
                        case 3:
                            data.acTypeName = '电表水表混合'
                            break
                        case 4:
                            data.acTypeName = '电表气表混合'
                            break
                        case 5:
                            data.acTypeName = '水表气表混合'
                            break
                        case 6:
                            data.acTypeName = '电表水表气表混合'
                            break
                        default:
                            break
                    }
                }
                this.userInfo = data
            }
            // else {
            //     PopupCommon.notify('info', '暂无此账户信息')
            // }
            // }
        },
        back() {
            this.$emit('back', this.inType)
        },
        getWgxhImg(xh) {
            return xh == 1
                ? require('../../assets/images/monitor/info3.png')
                : xh == 2
                ? require('../../assets/images/monitor/info2.png')
                : xh == 3
                ? require('../../assets/images/monitor/info1.png')
                : xh == 4
                ? require('../../assets/images/monitor/info.png')
                : require('../../assets/images/monitor/info4.png')
        },
        getStatusClass(status) {
            return status == 1 ? 'status normal' : 'status unNormal'
        },
        echartBtnClick(btnName) {
            this.dateValue = Utility.getCurrentTime()
            this.currentEcharts = btnName
        }
    }
}
</script>

<style scoped lang="scss">
.main {
    height: 100%;
    overflow-y: auto;
}
.main::-webkit-scrollbar {
    width: 0px;
}
.main::-webkit-scrollbar-thumb {
    background: #ccc;
    border-radius: 0px;
}
.left {
    background-color: #f5f5f5;
    padding: 10px 15px;
}
.left .p33 {
    width: 33%;
    float: left;
    height: 35px;
    line-height: 35px;
    text-align: left;
    font-size: 14px;
    color: #666;
    margin-bottom: 4px;
}
.left .p66 {
    width: 66%;
    float: left;
    height: 35px;
    line-height: 35px;
    text-align: left;
    font-size: 14px;
    color: #666;
    margin-bottom: 10px;
}
.left .p33 .p33Label,
.left .p66 .p33Label {
    color: #666;
    font-size: 14px;
    min-width: 75px;
    display: inline-block;
    vertical-align: middle;
}

.p33Bz {
    line-height: 60px !important;
    text-align: right;
    padding-right: 7px;
}
.inputOrSelect {
    width: 120px;
}
.inInfo {
    margin-top: 0;
}
.inInfo .inInfoMain {
    margin: 0 10px;
    display: flex;
}
.inInfo .inInfoMain .right {
    width: 700px;
    text-align: right;
}
.inInfo .inInfoMain .left {
    flex: 1;
    text-align: left;
    margin-right: 10px;
    background-color: #fff;
    border: 1px solid #ebeef5;
    border-radius: 4px;
}

.status {
    width: 5px;
    height: 5px;
    border-radius: 5px;
    display: inline-block;
}
.normal {
    background-color: #00ffa9;
}
.unNormal {
    background-color: #999;
}
.deviceInfo {
    margin-top: 0;
    clear: both;
}
.userInfo {
    /* height: 130px; */
    padding: 0;
}
.userInfo .userContent {
    font-size: 14px;
    background: #ffffff;
    border: 1px solid #e0e0e0;
    border-radius: 4px;
    display: flex;
    flex-direction: column;
    align-items: center;
    flex-wrap: wrap;
    justify-content: left;
    margin: 0 10px;
    padding: 0 10px;
}
.userContentMain {
    width: 100%;
    display: flex;
}
.userContentLeft {
    width: 60%;
    display: flex;
}
.userContentRight {
    width: 40%;
    display: flex;
}
.userInfo .userContent .userItem {
    width: calc((100% - 30px) / 3);
    line-height: 30px;
}
.userInfo .userContent .userItem label {
    color: #999;
    // min-width: 100px;
    display: inline-block;
}
.userInfo .userContent .userItem span {
    font-size: 14px;
}
.rightContentNew {
    height: 100%;
    flex: none;
    text-align: left;
}
.back {
    height: 28px;
    line-height: 28px;
    text-align: left;
    padding-left: 10px;
    cursor: pointer;
    border-bottom: 1px solid #e0e0e0;
}
.back img {
    float: left;
    display: block;
    cursor: pointer;
    margin-right: 5px;
    margin-top: 4px;
}
.back label {
    cursor: pointer;
}
.analysis {
    display: flex;
    position: relative;
    padding: 0;
}

.analysis .aEcharts {
    flex: 1;
    .ynfx-content {
        display: flex;
        gap: 10px;
        margin: 0 10px;
        .ynfx-content1 {
            width: 100%;
        }
    }
}

.analysis .aTable {
    width: 360px;
    background-color: #e6edfd;
    height: 306px;
    padding: 10px 20px;
    border-radius: 4px;
    margin-left: 10px;
}
.mb10 {
    margin-bottom: 10px;
    font-size: 16px;
}

.analysis .aTable .aTableHeader {
    font-size: 12px;
    height: 35px;
    line-height: 35px;
    display: flex;
}
.analysis .aTable .aTableHeader label {
    font-size: 18px;
    font-weight: bold;
}
.analysis .aTable .aTableHeader span {
    font-size: 12px;
    text-align: right;
    flex: 1;
}
.analysis .aTable .aTableHeader span img {
    margin-left: 10px;
}

.analysis .aTable .aTableMain {
    font-size: 14px;
    background-color: #80c8a7;
    border-radius: 4px;
    padding: 50px 15px;
    height: 100px;
    margin-top: 20px;
}
.analysis .aTable .aTableMain .aTableItem {
    font-size: 20px;
    height: 35px;
    width: 100%;
    margin-bottom: 20px;
}
.analysis .aTable .aTableMain .aTableItem label {
    font-size: 18px;
    background-color: #fff;
    height: 25px;
    display: block;
    float: left;
    width: 20px;
    margin-right: 5px;
    line-height: 25px;
    text-align: center;
    font-weight: bold;
    border-radius: 2px;
}
.analysis .aTable .aTableMain .aTableItem span {
    background-color: #333;
    height: 5px;
    display: block;
    float: left;
    width: 5px;
    margin-right: 5px;
    border-radius: 5px;
    margin-top: 15px;
}
.analysis .aTable .aTableMain .aTableItem font {
    font-size: 14px;
    color: #fff;
    margin-top: 10px;
    display: block;
    float: left;
    margin-left: 5px;
}

.analysis .aTable .aTableMain .aTableContent {
    font-size: 12px;
}
.analysis .aTable .aTableMain .aTableContent .aTableContentHalf {
    width: 50%;
    float: left;
    height: 30px;
    line-height: 30px;
    color: #fff;
}
.analysis .aTable .aTableMain .aTableContent .aTableContentHalf label {
    font-size: 14px;
    color: rgba(255, 255, 255, 0.7);
}

.analysis .aTable .aTableMain .aTableContent .aTableContentHalf span {
    font-size: 14px;
}

.analysis .aTable .aTableTip {
    margin-top: 15px;
}

.analysis .aTable .aTableTip span {
    font-size: 12px;
    height: 14px;
    line-height: 14px;
    display: inline-block;
    margin-right: 10px;
}

.analysis .aTable .aTableTip span img {
    float: left;
    margin-right: 5px;
}
.analysis .aTable .aTableTip span label {
    font-size: 12px;
}

.bgF5 {
    background-color: #fff;
    border: 1px solid #e0e0e0;
    border-radius: 4px;
}
</style>
